<template>
  <div class="br-page-view">
    <dv-border-box-9>
      <div class="box">
        <div class="df-ac-jcsb">
          <div class="box-title">人员结构</div>
          <dv-decoration-9 style="width:.25rem;height:.25rem; position:relative;left:-0.5rem;" />
        </div>
        <div ref="echart" class="box-echart"></div>
      </div>
    </dv-border-box-9>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-liquidfill'
export default {
  name: 'BottomLeft',
  data () {
    return {

    }
  },
  async mounted () {
    await this.initChart()
  },
  methods: {
    async initChart () {
      var option = {
        series: [{
          type: 'liquidFill',
          data: [0.6, 0.5, 0.4, 0.3],
          radius: '90%',
          itemStyle: {
            shadowBlur: 0
          },
          outline: {
            borderDistance: 0,
            itemStyle: {
              borderWidth: 5,
              borderColor: '#156ACF',
              shadowBlur: 20,
              shadowColor: 'rgba(255, 0, 0, 1)'
            }
          }
        }]
      }
      var myChart = echarts.init(this.$refs.echart)
      myChart.setOption(option)
    }
  }
}
</script>
<style lang="scss" scoped>
.br-page-view {
  padding: 0.25rem;
  height: 26.8vh;
  .box {
    position: relative;
    // height: 100%;
    .box-title {
      color: #1bb4f9;
      font-size: 0.225rem;
      padding: 0.15rem 0 0.1rem 0.625rem;
    }
    .box-echart {
      width: 90%;
      height: 21.5vh;
      margin: 0 auto;
    }
  }
}

</style>
